<template>
  <div id="app">
    <header>
    <mt-header title="vue-cli项目">
    <span slot="left" @click="goBack">
    <mt-button icon="back">返回</mt-button>
    </span>
    <mt-button icon="more" slot="right"></mt-button>
    </mt-header> 
    </header>
    <div class="body">
      <router-view/>
    </div>
    <footer>
      <router-link to="/" >首页</router-link>
      <router-link to="/car" >购物车</router-link>
      <router-link to="/home" >个人</router-link>
      <router-link to="/news" >新闻</router-link>
    </footer>
  </div>
</template>

<script>

export default {
  name: 'App',
  methods: {
    goBack(){
      this.$router.go(-1)
    }
  }
}
</script>

<style>
/* #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
* {
  padding: 0;
  margin: 0;
}
body {
  background-color: #fff
}
a {
  text-decoration: none;
}
ul {
  list-style: none
}
.lunbotu {
  height: 60px;
}
footer {
  height: 50px;
  width: 100%;
  background-color: pink;
  position: fixed;
  display: flex;
  bottom: 0;
  overflow: hidden;
}
.body {
  padding: 30px 0
}
header {
  width: 100%;
  position: fixed;
  z-index:99;
  height: 50px;
}
footer a {
  width: 25%;
  line-height: 50px;
  text-align: center;
  display: inline-block;
  border: 1px solid #000;
  box-sizing: border-box
}
#app {
  padding-bottom: 50px
}

</style>
